<template>
    <div class="articleDetails">
        <div class="container">
            <div class="bl-row">
                <div>
                    <h1 class="wztitle">{{articleDetails.title}}</h1>
                    <div class="author-box">
                        <div class="author_headimg">
                            <img :src="require('@/assets/imgs/author_headimg.png')" alt="">
                        </div>
                        <div class="post_meta_content">
                            <p class="post_time"><b class="iconfont icon-rili"></b>{{articleDetails.pushTime}}</p>
                            <div class="post_author">
                                <span><b class="iconfont icon-touxiang-shi"></b>{{articleDetails.userName}}</span>
                                <span><b class="iconfont icon-pinglun3-copy"></b>评论（{{articleDetails.comm_countnum}}） </span>
                                <span><b class="iconfont icon-yuedu"></b>{{articleDetails.lookUp}} VIEWS</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-html="articleDetails.content"></div>

                <div class="comment_conten_box">
                    <p class="comm_num">{{commData.length}}&nbsp;&nbsp;Comments</p>
                    <ul>
                        <li class="comment_conten_itme" v-for="(itme, index) in commData" :key="index">
                            <div class="itme_headimg">
                                <img :src="headimg" alt="" srcset="">
                            </div>
                            <div class="itme_right">
                                <p>
                                    <span class="username">{{itme.userneme||itme.username2}} <i class="confont" v-if="!itme.userneme">游客</i></span>
                                    <span class="comm_time">{{itme.commtime}}</span>
                                </p>
                                <p class="itme_conten">{{itme.comm_conten}}</p>
                            </div>
                        </li>
                    </ul>
                </div>

                <div class="comment">
                    <!-- <div class="user-mask" v-if="!userinfo.id">
                        <router-link :to="{name:'登录'}" tag="p">你还没登录，请先登录</router-link>
                    </div> -->
                    <p class="comment_head">留下你的评论</p>
                    <div class="comment_main">
                        <div class="comment_input">
                            <p><input type="text" v-model="username" name="user" id="" placeholder="昵称*"></p>
                            <p><input type="text" v-model="Email" name="user" id="" placeholder="邮箱*"></p>
                            <p><input type="text" v-model="website" name="user" id="" placeholder="网站地址"></p>
                        </div>
                        <div class="comment_conten">
                            <textarea name="" id="" v-model="conten" cols="30" rows="6" placeholder="你可以在这里输入评论内容..."></textarea>
                        </div>
                    </div>
                    <p class="btn_box"><button class="btn" v-waves.button.float @click="_userComment">提交评论</button></p>
                </div>
            </div>
            
        </div>
    </div>
</template>
<script>
import { getArticleDetails, userComment} from "api/article"
import marked from 'marked/marked.min.js'
import { setTimeout } from 'timers';

export default {
    data(){
        return {
            wId: this.$route.query.wId,
            articleDetails:{},
            username: "",
            Email: "",
            conten: "",
            website: "",
            headimg:require('@/assets/imgs/author_headimg.png'),
            commData:[]
        }
    },
    computed:{
        userinfo(){
            this.Email = this.$store.state.userinfo.Email
            this.username = this.$store.state.userinfo.userName
            return this.$store.state.userinfo
        }
    },
    methods:{
        _getArticleDetails(){
            let data = {
                wId: this.wId
            }
            getArticleDetails(data).then(res=>{
                this.articleDetails = res.data
                this.articleDetails.pushTime = this.tool.getFormatDate(this.articleDetails.pushTime);

                this.commData = res.data.commdata;
                this.commData.forEach(itme => {
                    itme.commtime = this.tool.getFormatDate(itme.commtime); 
                });
            })
        },
        _userComment(){
            if(this.username=='') return this.$message("用户名不能为空！")
            if(this.Email=='') return this.$message("邮箱不能为空！")
            if(this.conten=='') return this.$message("评论内容不能为空！"); 
            let data = {
                username: this.username,
                Email: this.Email,
                website: this.website,
                conten: this.conten,
                Wid: this.wId,
                Uid: this.userinfo.id
            }
            userComment(data).then(res=>{
                console.log(res);
                if(res.code==0){
                    this.$message({
                        message: res.msg,
                        type: 'success'
                    });
                    this.username=""
                    this.Email=""
                    this.website=""
                    this.conten=""
                    this._getArticleDetails();
                }else{
                    this.$message("评论失败")
                }
            })
        }
    },
    mounted(){
        this._getArticleDetails();
        if(!this.wId){
            return this.$router.push({name:"首页"});
        }
    }
}
</script>
<style lang="scss" scoped>
.wztitle{
    color:#2c3e74
}
.confont{
    background: #2dce89;
    color: #fff;
    padding: 3px 8px;
    border-radius: 8px;
}

@media screen and (max-width: 450px){
    .container{
        width: 100% !important;
        .bl-row{
            padding: 0 0.3rem;
            line-height: 1.8;
        }
    }
    .bl-row h1{
        padding: 0 !important;
    }
    .comment_input{
        display: flex;
        flex-direction: column;
        p{
            flex: 1;
            padding: 0.1rem 0.2rem; 
        }
    }
}
    .container{
        width: 50%;
        margin: 0 auto;
    }
    .bl-row{
        margin-top: 0.8rem;
        padding: 0 0.8rem;
        line-height: 1.8;
    }
    .bl-row h1{
        font-size: 0.5rem;
        text-align: center;
        padding: 0 1.3rem; 
    }
    .author-box{
        display: flex;
        margin: 0.32rem 0;
        .author_headimg{
            width: 60px;
            height: 60px;
            margin-right: 0.45rem;
            border-radius: 50%; 
            overflow: hidden;
            border: rgba(221, 236, 229, 0.88) solid 0.045rem;
            img{
                width: 100%;
                height: 100%
            }
        }
        .post_meta_content{
            display: flex;
            flex-direction: column;
            justify-content: center;
            line-height: 0.4rem;
            flex: 1;
            .post_time{
                color: #525f7f;
                font-size: 12px;
                b{
                    padding-right: 0.1rem;
                }
            }
            .post_author span{
                color: #525f7f;
                font-size: 12px;
                text-transform: uppercase;
                padding-right: 0.1rem; 
                b{
                    font-size: 13px;
                    padding-right: 0.1rem;
                }
            }
            .post_author span+span{
                padding-left: 0.1rem; 
                border-left: 1px solid #ccc;
            }
        }
    }
    .comment_conten_box::before{
        margin-top: 30px;
        margin-bottom: 30px;
        display: block;
        content: "";
        width: 100%;
        height: 1px;
        background: linear-gradient(270deg,rgb(255,255,255) 0%,rgb(229,229,229) 50%,rgb(255,255,255) 100%);
    }
    .comm_num{
        font-size: 0.45rem;
    }
    .comment_conten_itme+.comment_conten_itme{
        border-top: 0.01rem solid #ddd
    }
    .comment_conten_itme{
        display: flex;
        align-items: center;
        padding: 0.5rem 0;
        .itme_headimg{
            width: 65px;
            height: 65px;
            clip-path: polygon(50% 0%,100% 50%,50% 100%,0% 50%);
            margin-right: 10px;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .itme_right{
            flex: 1;
            p{
                font-size: 0.3rem;
                font-weight: 600;
                span.username{
                    color:#f57f17;
                }
                span.comm_time{
                    color: #757575;
                }
            }
            .itme_conten{
                color: #844334;
            }
        }
        
    }




    .comment{
        position: relative;
        margin: 15px 0;
        padding-bottom: 1px;
    }
    .comment .user-mask{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        background: rgba(0,0,0,.3);
        z-index: 10;
        display: flex;
        justify-content: center;
        align-items: center;
        p{
            color: #1da1f2;
            font-weight: bold;
            font-size: 0.34rem;
            cursor: pointer;
        }
    }
    .comment:before{
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        margin: 30px 0;
        background: linear-gradient(270deg,rgb(255,255,255) 0%,rgb(229,229,229) 50%,rgb(255,255,255) 100%);
    }
    .comment_head{
        text-align: center;
        font-size: 0.5rem;
        margin-top: 12px;
        margin-bottom: 12px;
    }
    .comment_input{
        display: flex;
        p{
            flex: 1;
            padding: 0.1rem 0.2rem; 
        }
    }
    .comment_input p input{
        width: 100%;
        padding: 0.2rem;
        border: 0.01rem solid #cad1d7;
        border-radius: 5px;
        color: #8898aa;
        font-size: 0.28rem;
        font-weight: bold
    }
    ::-webkit-input-placeholder {
        color: #aab2bd;
    }
    .comment_conten{
        margin-top: 10px;
        textarea{
            width: 100%;
            padding: 0.2rem;
            font-size: 0.28rem;
            color: #8898aa;
            border: 0.01rem solid #cad1d7;
            border-radius: 5px;
        }
    }
    .btn_box{
        margin: 0.4rem;
        text-align: center;
        .btn{
            padding: 0.3rem 0.35rem;
            color: #fff;
            font-weight: bold;
            border-radius: 0;
            border-color: #2dce89;
            background-color: #2dce89;
            cursor: pointer;
        }
    }
</style>

